<template>
  <!-- template中只允许有一对<div>标签，其他标签需要在这一对里面 -->
  <div class="about">
    <!-- 插值语法 -->
    <h1>父组件</h1>
<!-- 实现了从父组件向子组件传递数据"info"。子组件用msg变量接收了info的信息。-->
    <input type="text" v-model="info">
    <h4>收到子组件1传递信息:{{childMsg}}</h4>
    <input type="text" v-model="value">
    <h4>收到子组件2修改的数据：{{value}}</h4>
    <el-row>
      <el-col :span="12">
<!--        子组件1 out是传递给父组件时 emit 的自定义事件-->
        <hello-son :msg="info" @out="receiveChildMsg"></hello-son>
      </el-col>
      <el-col :span="12">
<!--        子组件2 value是父组件传递给子组件的属性-->
<!--        如果改成 :value="value" 则只能实现 父组件传递数据给子组件。无法实现双向绑定-->
        <hello-child v-model="value"></hello-child>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import helloChild from "@/components/HelloChild";
import helloSon from "@/components/HelloSon";

export default {
  name: 'AboutView',
  components:{
    helloSon,
    helloChild
  },
  data() {
    return {
      info: "TO子组件1: 在做什么？",
    //  接收子组件发送的信息
      childMsg:'',
      value: "TO子组件2: 天气很好",
    };
  },
  //vue生命周期钩子函数。vue实例被创建时调用
  created() {

  },
  // 所有的方法都写在methods中。
  methods: {
    receiveChildMsg(value){
      this.childMsg = value;
    }
  },
};
</script>

<style scoped lang="scss">
.about {
  background-color:antiquewhite;
}
</style>